<template>
  <div class="login-wrapper">
    <div
      class="login-user-center _no_drag_area"
      @click="openUserCenter"
    >
      <img
        v-if="headImg"
        :src="headImg"
        class="head-img"
      >
      <svg-icon
        v-else
        icon-class="default-user"
        :size="24"
      />
      <div
        v-if="isLogin"
        class="login-tip-text"
        :title="nickName"
      >
        {{ nickName }}
      </div>
      <div
        v-else
        class="login-tip-text"
      >
        未登录
      </div>
    </div>
    <div
      v-if="isMember&&memberExpireTime&&!isNoLimitMember"
      class="login-user-time"
    >
      {{ memberExpireTime }}
    </div>
    <div
      v-if="isLogin&&isMember&&isNoLimitMember"
      class="login-user-btn-inner-membership"
      @click="openUserCenter"
    >
      <svg-icon
        style="color:#fff;"
        icon-class="user-center-vip"
        :size="20"
      />
      <span>终身会员</span>
    </div>
    <el-button
      v-else
      class="login-user-btn _no_drag_area"
      color="#FFDB95"
      @click="openUserCenter"
    >
      <div
        v-if="!isLogin"
        class="login-user-btn-inner"
      >
        <span>登录</span>
      </div>
      <div
        v-if="isLogin&&!isMember"
        class="login-user-btn-inner"
      >
        <svg-icon
          style="color:#fff;"
          icon-class="user-center-vip"
          :size="20"
        />
        <span>开通会员</span>
      </div>
      <div
        v-if="isLogin&&isMember&&!isNoLimitMember"
        class="login-user-btn-inner"
      >
        <span>续费</span>
      </div>
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserInfo } from '@/stores/user-info'
import { storeToRefs } from 'pinia';
import { invokeAsyncAPi } from '@/utils/xz-fn'
const userVisible = ref(false);//个人中心是否显示
const userInfoStore = useUserInfo();
const { headImg,isLogin,isMember,nickName,memberExpireTime,isNoLimitMember }=storeToRefs(userInfoStore)
const openUserCenter = () => {
  invokeAsyncAPi('fq_ShowUserCenter')
}
</script>

<style scoped lang="scss">
.login-wrapper{
  position: absolute;
  user-select: none;
  top: 0px;
  right: 120px;
  height: 50px;
  display: flex;
  align-items: center;
  gap:10px;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  .head-img{
    width:24px;
    height:24px;
    object-fit: contain;
  }
  .login-user-time{
    color: #7B4801;
  }
  .login-user-btn{
    border-radius: 20px;
    color:#7B4801;
    font-size: 12px;
    height:28px;
    // padding:0 20px;
    .login-user-btn-inner{
      display: flex;
      align-items: center;
      justify-content: center;
      gap:4px;
    }
  }
  .login-user-center {
    display: flex;
    align-items: center;
    gap:5px;
    .login-tip-text {
      color: #192655;
      line-height: 14px;
      max-width:100px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .login-user-btn-inner-membership {
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      margin-left: 5px;
      color:#7B4801;
      font-size: 12px;
      font-weight: 400;
    }
  }
}
</style>